<template>
  <div class="search-view">
    <div class="records-wrap">
      <ul class="records">
        <li
          v-for="(user, idx) in records"
          :class="{
            disabled: disabledUserIds && disabledUserIds.includes(user.id),
            selected: selectedUserIds && selectedUserIds.includes(user.id)
          }"
          :key="idx"
          class="record"
          @click="onUserClick(user)"
        >
          <span
            class="radio iconfont-zui"
            :class="[
              selectedUserIds && selectedUserIds.includes(user.id)
                ? 'icon-zui-radio-selected'
                : 'icon-zui-radio-unselected'
            ]"
          ></span>
          <img class="avatar" :src="user.avatarUrl || avatarDefault" alt="" />
          <span class="name">{{ user.name }}</span>
          <span class="info iconfont-zui icon-zui-info" @click.stop="$emit('infoClick', user)"></span>
        </li>
      </ul>
    </div>
    <zui-loading v-if="status === 0" />
    <div v-if="status === 2" class="empty-wrap">
      <div class="icon iconfont-zui icon-zui-empty"></div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'
import avatarDefault from '../assets/avatar-default.png'

const props = defineProps({ searchText: String, search: Function, disabledUserIds: Array, selectedUserIds: Array })
const emit = defineEmits(['select', 'unselect', 'infoClick'])

// 状态 0:搜索中，1:搜索成功，2:搜索无结果，-1:搜索失败
const status = ref(0)
const pageNum = ref(1)
const records = ref()
const search = _throttle(function (val) {
  props.search &&
    props.search(
      { searchText: val, pageNum: 1 },
      (data) => {
        status.value = 1
        records.value = data.records
        console.log('返回数据data :>> ', data)
      },
      (err) => {
        status.value = -1
      }
    )
}, 500)

watch(
  () => props.searchText,
  (val) => {
    val && search(val)
  },
  {
    immediate: true
  }
)

function _throttle(func, delay) {
  let lastCallTime = 0 // 上次函数调用时间
  return function (...args) {
    const now = Date.now()
    if (now - lastCallTime >= delay) {
      // 如果距离上次调用的时间大于等于指定的延迟时间，则执行函数
      func.apply(this, args)
      lastCallTime = now
    }
  }
}

//***** 分页 *****//

//***** 选择 *****//
function onUserClick(user) {
  if (props.disabledUserIds && props.disabledUserIds.includes(user.id)) {
    return
  }
  console.log('user :>> ', user)
  if (props.selectedUserIds && props.selectedUserIds.includes(user.id)) {
    emit('unselect', user)
  } else {
    emit('select', user)
  }
}
</script>

<style lang="scss" scoped>
.search-view {
  position: relative;
  height: 100%;
  background-color: #ffffff;
  .records-wrap {
    .records {
      .record {
        padding: 10px 20px;
        display: flex;
        align-items: center;
        .radio {
          color: var(--zui-color-text-secondary);
          font-size: 20px;
        }
        .avatar {
          margin-left: 8px;
          width: 32px;
          height: 32px;
          border-radius: var(--zui-size-border-radius-small);
        }
        .name {
          margin-left: 8px;
          flex: 1;
        }
        .info {
          font-size: 22px;
          color: var(--zui-color-text-secondary);
        }
        &.selected {
          .radio {
            color: var(--zui-color-primary);
          }
        }
        &.disabled {
          *:not(.info) {
            opacity: 0.6;
          }
        }
      }
    }
  }
  .empty-wrap {
    .icon {
      font-size: 50px;
      color: var(--zui-color-primary);
    }
  }
}
</style>
